<script setup>
import {onMounted, reactive, ref} from "vue";
import Axios from "axios"
import {useRouter} from "vue-router";

document.title = "系统用户注册案例";
const api = "http://1.116.198.235/article/api/zxnews.php?type=register";
// 随机生成一个随机函数
const rand_id = Math.random().toString();

function authPic() {
  // 随机生成验证码的url地址
  document.getElementById("yzmtp").src = "http://1.116.198.235/article/api/authimg.php?ssid=" + rand_id;
}

// 等待html加载完再执行
onMounted(function () {
  authPic();
})
// 响应式传值
const localDate = reactive({
  user: "", password1: "", password2: "", authid: rand_id, authcode: "",
});
const agree = ref(false);

function reg() {
  if (localDate.user.length < 6) {
    alert("提示:账号不能少于6位！")
  } else if (localDate.password1.length < 6 || localDate.password1 !== localDate.password2) {
    alert("提示：两次密码要一致，不能少于6位！")
  } else if (localDate.authcode === "") {
    alert("提示：验证码不能为空！")
  } else if (!agree.value === true) {
    alert("提示：请勾选同意框！")
  } else {
    // 发送到服务器
    Axios.post(api, localDate).then(function (res) {
      let jieguo = res.data;
      if (jieguo.code === 'ok') {
        router.push('/login')
        alert("提示：账号注册成功！")
        // location.href = "http://1.116.198.235/article/login.html"
      } else if (jieguo.code === "error1") {
        alert("提示：账号已经存在，请更换！")
      } else if (jieguo.code === "error3") {
        alert("提示：验证码错误！")
      } else {
        alert("提示：注册失败！")
      }
    })
  }

}

const router = useRouter();

function login() {
  router.push('/login');
}

// function replace(){
//   if(agree.value==true){
//     router.replace('/register')
//   }else{
//     alert("提示：请勾选同意框！")
//   }
// }

</script>


<template>
  <div class="background">
    <div class="form-box">
      <div class="title">
        <div class="avatar-box">
          <img class="prew" src="/public/images/4.jpg" alt="">
        </div>
        <span>SDWK</span>
        <p>WELCOME <br> TO Register</p>
      </div>
      <form class="form-horizontal">
        <div class="form-group">
          <label for="inputEmail3" class=" control-label">账号</label>
          <div class="input-box">
            <input v-bind:value="localDate.user" @input="localDate.user = $event.target.value" type="text"
                   maxlength="50" class="form-control" id="inputEmail3" placeholder="账号">
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword3" class=" control-label">密码</label>
          <div class="input-box">
            <input v-model.lazy="localDate.password1" maxlength="50" type="password" class="form-control"
                   id="inputPassword3" placeholder="密码">
          </div>
        </div>

        <!-- 正确 -->
        <!-- has-error 错误的类 -->
        <div class="form-group has-success has-feedback">
          <label class="control-label" for="inputSuccess2">确认密码</label>
          <input v-model.lazy="localDate.password2" maxlength="50" type="password" class="form-control"
                 id="inputSuccess2" aria-describedby="inputSuccess2Status" placeholder="确认密码">
          <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
          <span id="inputSuccess2Status" class="sr-only"></span>
        </div>
        <!-- 验证码 -->
        <div class="form-group-y">
          <label class="sr-only" for="exampleInputEmail3">验证码</label>
          <input v-model.lazy="localDate.authcode" maxlength="4" type="text" class="form-control"
                 id="exampleInputEmail3" placeholder="请输入验证码">
          <span class="yan"><img id="yzmtp" alt="验证码" @click="authPic" style="cursor: pointer;"></span>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
              <label>
                <input type="checkbox" v-model="agree"> 同意勾选框
              </label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button @click="reg" type="submit" class="btn btn-default">注册</button>
            <button @click=login type="submit" class="btn btn-default">登录</button>
          </div>
        </div>
      </form>
    </div>
    <div style="height: 550px"></div>
  </div>

</template>


<style scoped>
.background {
  margin: 0;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, #aae3a1, #a9e3a1, rgba(255, 255, 255));

}

.title {
  position: relative;
  float: left;
  width: 200px;
  height: 380px;
  margin: 10px 0;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  /* text-overflow: ellipsis; */
  display: block;
  word-wrap: break-word;
  justify-items: center;
  border-right: 2px solid #a9e3a1;
}

.title span {
  position: absolute;
  top: 180px;
  left: 73px;
  font-size: 18px;
  font-weight: 700;
  color: #898888;
}
.title >p {
  position: absolute;
  top: 260px;
  left: 65px;
  text-align: center;
  font-family: "华文琥珀";
}
.avatar-box {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 67px;
  left: 48px;
  overflow: hidden;
  border-radius: 50%;
  background-color: palegoldenrod;
}

.avatar-box img {
  width: 100%;
  height: 100%;
}

.form-box {
  width: 800px;
  height: 410px;
  margin: 100px auto;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  background-color: rgba(240, 240, 240, 0.4);

}

.form-group {
  margin: 10px 0;
}
.form-group > div > div > label > input:hover {
  cursor: pointer;
}
.form-horizontal {
  float: right;
  margin: -388px 7%;
}

.input-box {
  width: 500px;
}

.has-feedback {
  width: 500px;
}

.form-group-y {
  position: relative;
  width: 250px;
}

.form-group > div > button {
  width: 80px;
  height: 40px;
  border-radius: 20px;
  margin: 0 10px;
  background-color: #f8f4ed;
}

.yan {
  position: absolute;
  display: block;
  top: 30px;
  left: 270px;
}
</style>
